<template>
  <div>
    <el-form ref="formRef" :model="form" label-width="auto">
      <el-form-item label="名称：">
        <el-input v-model="form.sortName"></el-input>
      </el-form-item>
      <el-form-item label="图片：">
        <el-upload action="#" :http-request="uploadImage" :file-list="fileList">
          <el-button size="small" type="primary">选择文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { ref, reactive, toRefs, onBeforeMount, unref } from "vue";
// 必须在setup中使用
import { useRouter, useRoute } from "vue-router";
import { toast } from "@/utils/toast";
import { addTechSort, updateTechSort, uploadImgs } from "service/sort";

export default {
  setup() {
    const formRef = ref(null);
    const formData = reactive({
      form: {
        id: "",
        sortName: "",
        imgUrl: "",
      },
    });
    const iRouter = useRouter();
    const route = useRoute();

    const uploadURl = ref("http://localhost:8888/upload/img");

    const state = reactive({
      fileList: [], // name，url
    });

    const dialogImageUrl = ref("");
    const dialogVisible = ref(false);

    let tempList: string[] = []; // 临时存放图片地址

    const handleRemove = (file, fileList) => {
      tempList = fileList.map((item) => item.response.data);
      console.log(file, fileList, tempList, "移除后");

      // 处理表单提交的图片数组
      if (tempList.length !== 0 && tempList.length === 1) {
        formData.form.imgUrl = tempList[0];
      } else {
        formData.form.imgUrl = tempList.join(",");
      }
    };

    const handlePreview = (file) => {
      dialogImageUrl.value = unref(file).url;
      dialogVisible.value = true;
    };

    const handSuccess = (response, file, fileList) => {
      console.log(response, file, fileList, "response, file, fileList");
      if (response.code === 200) {
        tempList = fileList.map((item) => item.response.data);

        // 处理表单提交的图片数组
        if (tempList.length !== 0 && tempList.length === 1) {
          formData.form.imgUrl = tempList[0];
        } else {
          formData.form.imgUrl = tempList.join(",");
        }
      } else {
        toast(response.msg);
      }

      console.log(tempList, "tempList");
    };

    onBeforeMount(() => {
      // console.log(route.query.id, "route参数");
      if (route.query.id && route.query.id !== "") {
        formData.form.id = route.query.id as string;
        // 修改面包屑显示文字
        console.log(route.meta, "route.meta");
        route.meta.title = "修改知识";
        console.log(route.meta, "route.meta111");
      }
    });

    const onSubmit = () => {
      // return
      if (formData.form.id !== "") {
        updateTechSort(formData.form);
      } else {
        addTechSort(formData.form);
      }
    };
    const haveToken = reactive({
      token: localStorage.getItem("token"),
    });
    console.log(haveToken, "haveToken");

    // 上传图片
    const uploadImage = async (file) => {
      let fileName = file.file.name;
      let formDatas = new FormData();
      formDatas.append("file", file.file);
      let result = await uploadImgs(formDatas);
      formData.form.imgUrl = result.data;

      state.fileList.push({
        name: fileName,
        url: result.data,
      });
    };

    return {
      // toRefs()将响应式的对象变为普通对象 再解构，在模板中就可以直接使用属性
      ...toRefs(state),
      ...toRefs(formData),
      uploadImage,
      haveToken,
      formRef,
      onSubmit,
      dialogVisible,
      dialogImageUrl,
      handleRemove,
      handlePreview,
      handSuccess,
      uploadURl,
    };
  },
};
</script>

<style></style>
